let that;
class Table{
    //id是new之后的实例div
    constructor(id){
        that = this;
        //获取页面 所有元素  //this 是当前实例
        this.main = document.querySelector(id);
        
        this.add = this.main.querySelector(".tabadd");
        this.ul = this.main.querySelector(".fisrstnav ul:first-child");
        this.tabscon = this.main.querySelector(".tabscon");

   
        //调用初始化
        this.init();
    }
    //后期需要从新绑定更新
    getDom(){
         //获取删除按钮
        this.remove = this.main.querySelectorAll(".icon-guanbi");
        this.lis = this.main.querySelectorAll("li");
        this.sections = this.main.querySelectorAll("section");
        this.spans= this.main.querySelectorAll(".fisrstnav ul span:first-child")
    }
    //初始化
    init(){
        this.getDom();
        this.add.onclick = this.addTab;
        //给 切换局域栏绑定事件
        for (let i = 0; i < this.lis.length; i++) {
            const element = this.lis[i];
            element.index = i;
            element.onclick =  this.toggleTab;
            this.remove[i].onclick = this.DelTab;
            this.spans[i].ondblclick = this.EditTab;
            this.sections[i].ondblclick = this.EditTab;
        }
    };
    //添加 增删改查的功能
    addTab(){
        that.clearClass();
        let random = Math.random();
        let liHtml = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
        let sectionHtml = '<section class="conactive">测试'+random+'</section>'
        //this 指向 li
        that.ul.insertAdjacentHTML('beforeEnd', liHtml);
        console.log(that.tabscon);
        that.tabscon.insertAdjacentHTML('beforeEnd',sectionHtml)
        that.init();
    };
    DelTab(element){
        element.stopPropagation();
        let index = this.parentNode.index;
        that.lis[index].remove();
        that.sections[index].remove();
    
        that.init();
        if(document.querySelector('.liactive'))  return;   

        index--;
        that.lis[index] && that.lis[index].click();
    };
    EditTab(){
        let str = this.innerHTML;
          // 双击禁止选定文字
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
          this.innerHTML = '<input type="text" />';
          var input = this.children[0];
          input.value = str;
          input.select();

          input.onblur = function(){
              this.parentNode.innerHTML = this.value;
          }

          input.onkeyup = function(e){
              if(e.keyCode == 13){
                  this.blur();
              }
          }
      
    };
    //切换
    toggleTab(){
        // console.log(this);
        //这里的this, 是tab ,因为是上面的函数 的局部this
    
        that.init();
        that.clearClass();
        this.className = "liactive";
        that.sections[this.index].className = "conactive";
    }

    //清楚 排他样式
    clearClass(){
        for (let i = 0; i < this.lis.length; i++) {
            const element = this.lis[i];
            element.className = "";
        }
        for (let i = 0; i < this.sections.length; i++) {
            const element = this.sections[i];
            element.className = "";
        }
    }
}

new Table("#tab")